<template>
    <div class="main-container">
        <levelbar></levelbar>
        <div class="form-box" v-loading="loading">
          <div class="form-title">查看广告</div>
            <el-form :model="dataForm" ref="dataForm" label-width="92px" class="form">
                <span class="title">广告类型与名称</span>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <el-form-item label="广告类型：">
                      <span>{{dataForm.advertType == '0' ? '积分商城顶部广告位' : dataForm.advertType == '1' ? 'e学云教育平台首页广告位' : dataForm.advertType == '2' ? 'APP全屏广告位' : dataForm.advertType == '5' ? '空间首页顶部广告位':''}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="广告名称：">
                      <span>{{dataForm.advertName}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <span class="title">广告上线时间与备注</span>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <el-form-item label="上线时间：">
                      <span>{{!dataForm.onlineTime ? '目前没有上线时间' : dataForm.onlineTime}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="备注：">
                      <span>{{!dataForm.remark ? '无' : dataForm.remark}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <span class="title" v-if="dataForm.appType">广告点击次数与指定位置</span>
                <span class="title" v-else>广告点击次数</span>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <el-form-item label="点击次数：">
                      <span>{{!dataForm.clickNum ? '--' :dataForm.clickNum == '0' ? '--' : dataForm.clickNum}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10" v-if="dataForm.appType">
                    <el-form-item label="指定位置">
                      <span>{{dataForm.appType == 0 ? '教学App' : dataForm.appType == 1 ? '家庭App' : dataForm.appType == 2 ? '教学App和家庭App' :'--'}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <span class="title">广告图片</span>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <div v-if="dataForm.advertPic !== null"><img class="img-width" :src="dataForm.advertPic" alt=""></div>
                    <div v-else-if="dataForm.iosOnePic !== null"><img class="img-width" :src="dataForm.iosOnePic" alt=""></div>
                    <div v-else-if="dataForm.androidPic !== null"><img class="img-width" :src="dataForm.androidPic" alt=""></div>
                    <div v-else-if="dataForm.iosTwoPic !== null"><img class="img-width" :src="dataForm.iosTwoPic" alt=""></div>
                    <div v-else><img class="img-width" :src="dataForm.iosThreePic" alt=""></div>
                  </el-col>
                </el-row>
                <span class="title">广告链接与自定义内容</span>
                <el-row :gutter="41">
                  <el-col :span="21" style="font-size:14px">
                    <span class="img-width text-border panel-body" v-if="dataForm.showType =='1'" v-html="dataForm.html"></span>
                    <span class="img-width" v-else-if="dataForm.showType =='0'">链接：<a v-if="dataForm.link" :href="dataForm.link">{{dataForm.link}}</a><span v-else>--</span></span>
                    <span v-else>无</span>
                  </el-col>
                </el-row>
                <span class="title">投放区域</span>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <el-form-item label="省份">
                      <province :disabled='true' v-model="dataForm.provinceId"></province>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <el-form-item label="城市">
                      <city :disabled='true' v-model="dataForm.cityId" :province="dataForm.provinceId" ></city>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <el-form-item label="区县">
                      <region :disabled='true' v-model="dataForm.areaId" :city="dataForm.cityId" ></region>
                    </el-form-item>
                  </el-col>
                </el-row>
                <div class="man-bom"></div>
                <span class="title">审核历史记录</span>
                <el-table :data="dataForm.lAudit" style="width: 100%">
                  <el-table-column prop="auditor" label="审核人"></el-table-column>
                  <el-table-column prop="checkTime" label="审核时间"></el-table-column>
                  <el-table-column prop="status" label="审核状态"></el-table-column>
                  <el-table-column prop="desc" label="审核描述"></el-table-column>
                </el-table>
                <div class="man-bom"></div>
                <el-row :gutter="41" type="flex" justify="center">
                  <el-col :span="2"><el-button @click="cancel">返回</el-button></el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import Levelbar from '../../../layout/Levelbar';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import { getAdvertInfoById } from 'api/advApi';
export default {
    name: 'getAdv',
    components: { province, city, region, Levelbar },
    data() {
        return {
            dataForm: {},
            loading: false,
            disabled: false
        };
    },
    created() {
        this.getAdvObj()
    },
    computed: {},
    methods: {
        getAdvObj() {
            this.loading = true;
            getAdvertInfoById(this.$route.params.id).then(data => {
                this.loading = false;
                this.dataForm = data.data.content;
            }).catch(Error => {
                this.loading = false;
            })
        },
        cancel() {
            this.$router.go(-1)
        }
    }
};
</script>

<style lang="scss" scoped>
    @import "../../../../../static/tinymce/skins/lightgray/content.min.css";
    .form-title {
        padding-top:8px;
        text-align: center;
        font-size: 18px;
        color: #333;
        line-height: 72px;
        font-weight: bold;
        font-family: Microsoft YaHei;
        border-bottom: 1px solid #ddd;
        }
.text-border{
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.img-width{
  display: block;
  max-width: 1050px;
  overflow: hidden;
}
.main-container {
  position: relative;
  padding: 20px 20px 10px;
}
.form-box{
    position: relative;
    padding: 0 50px;
    background: #fff;
    box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.man-bom {
  margin: 20px 0;
}
.box {
  margin: 20px 0;
}
.title {
  position: relative;
  font-size: 14px;
  color: rgb(106, 85, 72);
  padding-left: 14px;
  margin: 30px 0;
  display: block;
  &::after {
    position: absolute;
    content: "";
    width: 4px;
    height: 14px;
    background: #ff5e2c;
    left: 0;
    top: 4px;
  }
}
.describe {
  font-size: 14px;
  color: #666;
  margin: 20px 0;
}
i {
  font-style: normal;
  color: #999;
}
.el-upload-new {
  display: inline-block;
  text-align: center;
  cursor: pointer;
}
.el-upload-picture-new {
  border-radius: 6px;
  background-color: #fbfdff;
  border: 1px dashed transparent;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  cursor: pointer;
  line-height: 146px;
  vertical-align: top;
  i {
    font-size: 28px;
    color: #8c939d;
  }
}
</style>